<script setup lang='ts'>
import { getListByShortId, getPageDefaultGroup, getPageGroup, pageConfigPulish, pageConfigSwitchShowTitle, pageConfigSwitchStatus } from '@fl/api/advertising-api/page-config'
import { addSnapshot, delSnapshot, getSnapshotList, layoutSourceDel, updateByGroupSnapshotId, updateSnapshot } from '@fl/api/advertising-api'

import { SearchTable } from '@fl/components'
import { cloneDeep } from 'lodash-es'
import { reactive } from 'vue'
import { useDicts } from '../../hooks/use-dicts'
import addOrEditBox from './addOrEdit.vue'
// import type { adFormType, moveItemType } from '../../../advertising-management/type'
import { linkTypeMap } from '../../../advertising-management/type'
import { useRouter } from 'vue-router'
// import { util } from '@/pages/content-center/page-config/hooks/utils'

const props = defineProps<{
    activeTreeId?: number | string
    activePtagEn?: string
}>()
const emits = defineEmits(['getDefaultGroupId', 'showAdList'])

const { activeTreeId, activePtagEn } = toRefs(props)

const chooseAdId = defineModel<any>('chooseAdId', { required: false })
const records = defineModel<any>('records', { required: true })
const topForm = defineModel<any>('topForm', { required: false })
const topFormIsDefault = computed(() => {
    return topForm.value.isDefault
})
const router = useRouter()
const timeList = ref<any>()
const currentTime = ref<number>(0)
const defaultGroupId = ref<number | null>() // groupId
const defaultGroupName = ref<string>('')
const showColumns = ref<any>()
const datePickerDisabled = ref<boolean>(false)

const { useDict } = useDicts()

const tableHeight = ref<number>(540)
const visible = ref<boolean>(false)
const editId = ref<number>()
const editAppListId = ref<number | string>() // 编辑时的应用id
// const hotVisible = ref<boolean>(false)
// const hotEditId = ref()
const addOrEditRef = ref()
const isGetDefaultGroupIng = ref<boolean>(false) // 正在执行getDefaultGroup
const historyPageList = ref<any>()
const showTableType = ref<string>('default') // 默认配置 default，配置列表 configList，配置config

const total = computed(() => {
    return records.value?.length || historyPageList.value?.length || 0
})
// 弹框相关
const initForm = {
    activeEnd: '', // 生效结束时间
    activeStart: '', // 生效开始时间
    appListId: '', // 关联应用
    footIconUri: '', // 尾巴角标
    forwardParams: '', // 参数
    groupSnapshotId: undefined, // 广告排期id
    headIconUri: '', // 头角标
    id: undefined, // 广告id
    imgUri: '', // 图片
    sort: undefined,
    title: '', // 广告名称
}

const adForm = ref(cloneDeep(initForm))

// 查询列表
const isLoading = ref(false)

async function getDefaultGroup() {
    if (isGetDefaultGroupIng.value)
        return
    isGetDefaultGroupIng.value = true
    setTimeout(() => {
        isGetDefaultGroupIng.value = false
    }, 500)
    try {
        isLoading.value = true
        const res = await getPageDefaultGroup({ id: activeTreeId.value })
        defaultGroupName.value = res?.name || ''
        topForm.value.carouselType = res?.carouselType || 0
        topForm.value.carouselSpeed = res?.carouselSpeed || 2000
        if (res?.snapshotList && res.snapshotList.length > 0) {
            defaultGroupId.value = res.snapshotList[0]?.groupId
            emits('getDefaultGroupId', defaultGroupId.value)
            getSnapList(res.snapshotList[0]?.groupId, 1)
        }
        else {
            defaultGroupId.value = null
            emits('getDefaultGroupId', null)
            isLoading.value = false
            records.value = []
            timeList.value = []
            if (topForm.value?.isDefault === 1) {
                setTimeout(() => {
                    emits('showAdList')
                }, 1000)
            }
        }
    }
    catch (error) {
        isLoading.value = false
    }
}

// 除默认配置外的配置列表
async function getPageGroupList() {
    try {
        isLoading.value = true
        const params = {
            pageResourceId: String(activeTreeId.value),
            isContainDefault: '0',
        }
        const res = await getPageGroup(params)
        if (res && res.length > 0) {
            historyPageList.value = res
            console.log('historyPageList', historyPageList.value)
        }
        else {
            historyPageList.value = []
        }
        isLoading.value = false
    }
    catch (error) {
        isLoading.value = false
    }
}

watch(activeTreeId, () => {
    defaultGroupId.value = null
    getDefaultGroup() // 选择左侧树，触发此处
}, {
    immediate: true,
})

watch(topFormIsDefault, (val: any) => {
    if (val === 1) {
        console.log('watch1')
        chooseAdId.value = null // 切换默认时清空选择的广告组id
        datePickerDisabled.value = false
        showTableType.value = 'default'
        if (defaultGroupId.value) {
            getSnapList(defaultGroupId.value, 1)
        }
        else {
            getDefaultGroup()
        }

        showColumns.value = [
            { title: '序号', type: 'seq', width: 60 },
            { field: 'imgUri', slots: { default: 'imgUri' }, title: '图片', width: 110 },
            { field: 'headIconUri', slots: { default: 'headIconUri' }, title: '头角标', width: 110 },
            { field: 'footIconUri', slots: { default: 'footIconUri' }, title: '尾巴角标', width: 110 },
            { field: 'linkType', slots: { default: 'linkType' }, title: '链接类型', width: 100 },
            { field: 'businessType', title: '业务类型', minWidth: 100 },
            { field: 'title', title: '楼盘/产品名称', minWidth: 160 },
            // { field: 'forwardUrl', title: '链接'},
            { field: 'isShowTitle', slots: { default: 'isShowTitle' }, title: '启用标题', width: 90 },
            { field: 'activeStatus', slots: { default: 'activeStatus' }, title: '启用/禁用', width: 90 },
            { fixed: 'right', slots: { default: 'operate' }, title: '操作', width: 200 },
        ]
    }
    else {
        chooseAdId.value = null
        defaultGroupId.value = null
        records.value = []
        datePickerDisabled.value = true
        showColumns.value = [
            { title: '序号', type: 'seq', width: 60 },
            { field: 'imgUri', slots: { default: 'imgUri' }, title: '图片', width: 110 },
            { field: 'headIconUri', slots: { default: 'headIconUri' }, title: '头角标', width: 110 },
            { field: 'footIconUri', slots: { default: 'footIconUri' }, title: '尾巴角标', width: 110 },
            { field: 'linkType', slots: { default: 'linkType' }, title: '链接类型', width: 100 },
            { field: 'businessType', title: '业务类型' },
            { field: 'title', title: '楼盘/产品名称', width: 160 },
            // { field: 'forwardUrl', title: '链接' },
        ]
        // 多加一层列表
        showTableType.value = 'configList'
        getPageGroupList()
    }
}, {
    deep: true,
    immediate: true,
})

// 2.获取分期列表以及默认选中第一条
async function getSnapList(groupId, type: number, isFrom?: string) {
    if (!groupId)
        return
    if (type === 1) {
        defaultGroupId.value = groupId
    }
    if (isFrom === 'choosed') {
        showTableType.value = 'config'
    }
    try {
        const res2 = await getSnapshotList({ groupId })
        isLoading.value = false

        // 处理timeList
        if (res2.length) {
            timeList.value = res2.map(item => ({
                ...item,
                activeTime: [item.activeStart, item.activeEnd],
            }))
            // 根据当前时间判断时间分期高亮index
            currentTime.value = timeList.value.reduce((pre, cur, index) => {
                const startTime = new Date(cur.activeStart).getTime()
                const endTime = new Date(cur.activeEnd).getTime()
                const now = new Date().getTime()
                if (now < endTime && now > startTime) {
                    return index
                }
                else {
                    return 0
                }
            }, 0)

            console.log('currentTime.value', currentTime.value)
            selectTime(currentTime.value, timeList.value[currentTime.value])
        }
        else {
            timeList.value = [{
                activeTime: [],
                groupId: defaultGroupId.value,
            }]
            records.value = []
        }
    }
    catch (error) {
        isLoading.value = false
    }
}

// 3.查询广告组快照素材资源信息
async function getAdList(groupSnapshotId) {
    const res3 = await getListByShortId({ groupSnapshotId })
    records.value = res3.reduce((pre, cur, index) => {
        cur.tempSort = index + 1
        pre.push(cur)
        return pre
    }, [])
}

// 选择分期
function selectTime(index, item) {
    currentTime.value = index
    adForm.value.groupSnapshotId = item.id
    if (item.activeStart && item.activeEnd) {
        adForm.value.activeStart = item.activeStart
        adForm.value.activeEnd = item.activeEnd
    }
    else {
        records.value = []
    }
    item.id && getAdList(item.id)
}

// 设置分期时间
async function changeTime(val, item, index) {
    if (item.activeEnd && item.activeStart) {
        await updateSnapshot({
            activeEnd: val[1],
            activeStart: val[0],
            groupId: defaultGroupId.value,
            id: item.id,
        }).then((res) => {
            item.activeTime = [res.activeStart, res.activeEnd]
            item.id = res.id
        }).catch(() => {
            item.activeTime = []
        })
        selectTime(index, item)
    }
    else {
        await addSnapshot({
            activeEnd: val[1],
            activeStart: val[0],
            groupId: defaultGroupId.value,
        }).then((res) => {
            item.activeTime = [res.activeStart, res.activeEnd]
            item.id = res.id
        }).catch(() => {
            item.activeTime = []
        })
        selectTime(index, item)
    }
}

// 新增分期
function addAdTime(item, index) {
    const time = cloneDeep({
        activeTime: [],
        groupId: defaultGroupId.value,
    })
    timeList.value.push(time)
    selectTime(index + 1, time)
}

// 删除分期
function delTime(item, index) {
    if (item.activeTime?.length) {
        ElMessageBox.confirm(
            '您确认要删除这个广告排期吗',
            '删除',
            {
                cancelButtonText: '取消',
                confirmButtonText: '删除',
                type: 'warning',
            },
        )
            .then(() => {
                delSnapshot({
                    activeEnd: item.activeTime[1],
                    activeStart: item.activeTime[0],
                    groupId: defaultGroupId.value,
                    id: item.id,
                }).then(() => {
                    timeList.value.splice(index, 1)
                    let currentKey = 0
                    if (currentTime.value === index) {
                        if (index !== timeList.value.length)
                            currentKey = index
                        selectTime(currentKey, timeList.value[currentKey])
                    }
                    ElMessage({
                        message: '删除成功',
                        type: 'success',
                    })
                })
            }).catch(() => {
                ElMessage({
                    message: '取消删除',
                    type: 'info',
                })
            })
    }
    else {
        timeList.value.splice(index, 1)
        let currentKey = 0
        if (currentTime.value === index) {
            if (index !== timeList.value.length)
                currentKey = index
            selectTime(currentKey, timeList.value[currentKey])
        }
    }
}

// 启用标题
function switchShowTitle(row) {
    // console.log('switchShowTitle', row)
    if (isLoading.value)
        return
    const params = {
        id: row.id,
        enable: row.isShowTitle,
    }
    pageConfigSwitchShowTitle(params).then(() => {
        const tips = row.isShowTitle === 1 ? '已启用' : '已隐藏'
        ElMessage({
            message: tips,
            type: row.isShowTitle === 1 ? 'success' : 'info',
        })
        getAdList(row.groupSnapshotId)
    })
}

// 启用禁用
function switchActiveStatus(row) {
    console.log('switchActiveStatus', row)
    const params = {
        id: row.id,
        enable: row.activeStatus,
    }
    pageConfigSwitchStatus(params).then(() => {
        const tips = row.activeStatus === 1 ? '已启用' : '已禁用'
        ElMessage({
            message: tips,
            type: row.activeStatus === 1 ? 'success' : 'info',
        })
        getAdList(row.groupSnapshotId)
    })
}

// 添加
function goToAdd() {
    visible.value = true
    addOrEditRef.value.reset() // 先消除未填写的警告
    resetAdForm()
}

function resetAdForm() {
    adForm.value.title = ''
    adForm.value.imgUri = ''
    adForm.value.headIconUri = ''
    adForm.value.footIconUri = ''
    adForm.value.appListId = ''
    adForm.value.forwardParams = ''
    adForm.value.sort = undefined
    adForm.value.id = undefined
    adForm.value.forwardParams = ''
}

// 从广告组添加
function showAdList() {
    emits('showAdList')
}

// 上移、下移
function moveItem(row, type) {
    const { groupSnapshotId, id } = row
    updateByGroupSnapshotId({
        id,
        move: type === 'up' ? 2 : 3, // 上移2 下移3
    }).then(() => {
        getAdList(groupSnapshotId)
        ElMessage({
            message: type === 'up' ? '上移成功' : '下移成功',
            type: 'success',
        })
    })
}

// 列表：编辑
function goToEdit(row: any) {
    visible.value = true
    editId.value = row.id
    editAppListId.value = row.appListId // 编辑时的应用id
    adForm.value = {
        ...cloneDeep(row),
        footIconUri: row.footIconUri || '', // null图片组件有问题
        headIconUri: row.headIconUri || '',
    }
}

// 列表：编辑热区
// function goToEditHot(row: any) {
//     hotVisible.value = true
//     hotEditId.value = row?.id
// }

// 列表：热区提交
// function imgHotConfirm() {
//     console.log('热区提交')
// }

// 列表：删除
function deleteConfirm(row: any) {
    const { id, title } = row
    ElMessageBox.confirm(
        `您确认要删除广告『${title}』吗`,
        '删除',
        {
            cancelButtonText: '取消',
            confirmButtonText: '删除',
            type: 'warning',
        },
    )
        .then(() => {
            layoutSourceDel({
                id,
            }).then(() => {
                getAdList(row.groupSnapshotId)
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                })
            })
        }).catch(() => {
            ElMessage({
                message: '取消删除',
                type: 'info',
            })
        })
}

// 发布
function currentPublish() {
    goPubish(1)
}
function timedPublish(params) {
    goPubish(0, params?.dateTime)
}

const showAllTimeList = computed(() => {
    // 有配置时的默认配置、无配置时；展示configList时也不展示
    return (topForm.value?.isDefault === 1 || activePtagEn.value === 'ceramic') && showTableType.value !== 'configList'
})

async function goPubish(isImmediately: number, dateTime?: string) {
    if (topForm.value?.isDefault === 0 && !chooseAdId.value) {
        ElMessage({
            message: '请选择一组广告',
            type: 'warning',
        })
        return
    }
    if (records.value.length === 0) {
        ElMessage({
            message: '当前广告组无数据，请重新选择',
            type: 'warning',
        })
        return
    }
    const params = {
        carouselSpeed: topForm.value?.carouselSpeed || null,
        carouselType: topForm.value?.carouselType || 0,
        groupId: chooseAdId.value || defaultGroupId.value,
        isDefault: topForm.value?.isDefault,
        pageResourceId: activeTreeId.value,
        publishGroupType: 1, // 1 广告组
        isImmediately,
        publishedDate: dateTime,
    }
    pageConfigPulish(params).then(() => {
        ElMessage({
            message: '发布成功',
            type: 'success',
        })
        setTimeout(() => {
            topForm.value.carouselSpeed = 2000
            if (topForm.value.isDefault === 1) {
                getDefaultGroup()
            }
            else {
                chooseAdId.value = null
                // 新：刷新配置列表
                showTableType.value = 'configList'
                getPageGroupList()
            }
        }, 1000)
    })
}

// 新：配置列表 => 配置详情列表
function goToConfig(row) {
    console.log(row)
    showTableType.value = 'config'
    chooseAdId.value = row.id
    topForm.value.carouselType = row.carouselType
    topForm.value.carouselSpeed = row.carouselSpeed
    getSnapList(row.id, 0)
}

// 跳转到广告组对应页面
function gotoAdList() {
    router.push(`/content-center/advertising-management/advertising-group?id=${defaultGroupId.value}`)
}
// 跳转到广告组页面
function toAdGroup(sName: string) {
    router.push(`/content-center/advertising-management/advertising-group?keyword=${sName}`)
}

function gobackToConfigList() {
    showTableType.value = 'configList'
    timeList.value = []
    chooseAdId.value = null
    getPageGroupList()
}

defineExpose({
    currentPublish,
    timedPublish,
    getSnapList,
})

const gridOptions = reactive({
    columns: showColumns,
})

// 新：除默认配置的配置列表
const gridListOptions = reactive({
    columns: [
        { slots: { default: 'adName' }, title: '广告名称' },
        { field: 'platform', title: '平台类型' },
        { field: 'device', title: '设备' },
        { slots: { default: 'operate' }, title: '操作', width: 120 },
    ],
})
</script>

<template>
    <div class="mb20 flex">
        <span v-if="showTableType === 'config'"
              class="mr20"
        >
            <ElButton @click="gobackToConfigList">
                返回配置列表
            </ElButton>
        </span>

        <div class="top">
            <ElButton v-if="topForm?.isDefault === 1"
                      type="primary"
                      :disabled="!defaultGroupId"
                      @click="goToAdd"
            >
                <div class="i-ic:baseline-add size-16" />
                添加
            </ElButton>

            <ElButton v-if="topForm?.isDefault === 0"
                      type="primary"
                      @click="showAdList"
            >
                <div class="i-ic:baseline-add size-16" />
                从广告组选择
            </ElButton>

            <div v-if="topForm?.isDefault === 1"
                 class="group-title"
                 @click="gotoAdList"
            >
                {{ defaultGroupName }}
            </div>
        </div>

        <!-- <ElButton type="primary" @click="goToAdd" v-else>
            <div class="i-ic:baseline-add size-16" />
            添加
        </ElButton> -->
    </div>

    <!-- && showTableType !== 'configList' -->
    <div v-if="showAllTimeList || chooseAdId"
         class="ad-by-stages"
    >
        <div v-for="(item, index) in timeList"
             :key="item.adTime"
             class="time-item"
        >
            <div :class="currentTime === index ? 'ad-time-piker active' : 'ad-time-piker'">
                <el-date-picker v-model="item.activeTime"
                                type="datetimerange"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                format="YYYY-MM-DD HH:mm:ss"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                :disabled="datePickerDisabled"
                                @change="(val) => changeTime(val, item, index)"
                />

                <span :class="currentTime === index ? 'sort active' : 'sort'"
                      @click="selectTime(index, item)"
                >
                    {{ index + 1 }}
                </span>
            </div>

            <div class="icon-btns">
                <el-icon v-if="index === timeList.length - 1 && showAllTimeList"
                         class="add"
                         @click.stop="addAdTime(item, index)"
                >
                    <CirclePlus />
                </el-icon>

                <el-icon v-if="timeList.length > 1 && showAllTimeList"
                         class="del"
                         @click.stop="delTime(item, index)"
                >
                    <Delete />
                </el-icon>
            </div>
        </div>
    </div>

    <SearchTable v-if="showTableType !== 'configList'"
                 ref="tableRef"
                 v-bind="gridOptions"
                 :loading="isLoading"
                 :data="records"
                 :row-config="{ height: 100 }"
                 :height="tableHeight"
    >
        <template #imgUri="{ row }">
            <el-image v-if="row.imgUri"
                      style="width: 80px; height: 80px"
                      :src="row.imgUri"
                      :zoom-rate="1.2"
                      :max-scale="7"
                      :min-scale="0.2"
                      :preview-src-list="[row.imgUri]"
                      :initial-index="4"
                      fit="contain"
            />
        </template>

        <template #headIconUri="{ row }">
            <el-image v-if="row.headIconUri"
                      style="width: 80px; height: 80px"
                      :src="row.headIconUri"
                      :zoom-rate="1.2"
                      :max-scale="7"
                      :min-scale="0.2"
                      :preview-src-list="[row.headIconUri]"
                      :initial-index="4"
                      fit="contain"
            />
        </template>

        <template #footIconUri="{ row }">
            <el-image v-if="row.footIconUri"
                      style="width: 80px; height: 80px"
                      :src="row.footIconUri"
                      :zoom-rate="1.2"
                      :max-scale="7"
                      :min-scale="0.2"
                      :preview-src-list="[row.footIconUri]"
                      :initial-index="4"
                      fit="contain"
            />
        </template>

        <template #linkType="{ row }">
            {{ linkTypeMap[row.linkType] }}
        </template>

        <template #businessType="{ row }">
            {{ useDict('BusinessType', row.businessType) }}
        </template>

        <!-- <template #forwardUrl="{ row }">
            <el-link :href="row.forwardUrl" target="_blank">{{ row.forwardUrl }}</el-link>
        </template> -->

        <template #activeStatus="{ row }">
            <el-switch v-model="row.activeStatus"
                       :active-value="1"
                       :inactive-value="0"
                       @change="switchActiveStatus(row)"
            />
        </template>

        <template #isShowTitle="{ row }">
            <el-switch v-model="row.isShowTitle"
                       :active-value="1"
                       :inactive-value="0"
                       @change="switchShowTitle(row)"
            />
        </template>

        <template #operate="{ row }">
            <el-button class="small"
                       text
                       :disabled="row.tempSort === 1"
                       @click="moveItem(row, 'up')"
            >
                上移
            </el-button>

            <el-button class="small"
                       text
                       :disabled="row.tempSort === total"
                       @click="moveItem(row, 'down')"
            >
                下移
            </el-button>

            <!-- <el-button class="small" type="primary" text v-if="tableHot" @click="goToEditHot(row)">
                编辑热区
            </el-button> -->

            <el-button class="small"
                       type="primary"
                       text
                       @click="goToEdit(row)"
            >
                编辑
            </el-button>

            <el-button class="small"
                       text
                       type="warning"
                       @click="deleteConfirm(row)"
            >
                删除
            </el-button>
        </template>
    </SearchTable>

    <!-- 新: 除默认配置的配置列表 -->
    <SearchTable v-else
                 ref="tableListRef"
                 v-bind="gridListOptions"
                 :loading="isLoading"
                 :data="historyPageList"
                 :height="tableHeight"
    >
        <template #adName="{ row }">
            <span class="text-#da0004 cursor-pointer"
                  @click="toAdGroup(row.name)"
            >
                {{ row.name }}
            </span>
        </template>

        <template #imgUri="{ row }">
            <el-image v-if="row.imgUri"
                      style="width: 80px; height: 80px"
                      :src="row.imgUri"
                      :zoom-rate="1.2"
                      :max-scale="7"
                      :min-scale="0.2"
                      :preview-src-list="[row.imgUri]"
                      :initial-index="4"
                      fit="contain"
            />
        </template>

        <template #operate="{ row }">
            <el-button class="small"
                       type="primary"
                       text
                       @click="goToConfig(row)"
            >
                查看
            </el-button>
        </template>
    </SearchTable>

    <div class="total">
        共{{ total }}项数据
    </div>

    <addOrEditBox ref="addOrEditRef"
                  v-model:visible="visible"
                  v-model:id="editId"
                  v-model:appListId="editAppListId"
                  v-model:adForm="adForm"
                  :total="total"
                  @refresh="getAdList"
    />

    <!-- <ImgHot v-model:show="hotVisible" v-model:id="hotEditId" @confirm="imgHotConfirm" /> -->
</template>

<style lang="scss" scoped>
:deep(.small.el-button) {
    padding: 4px;
    margin-left: 6px;
}

.total {
    height: 50px;
    line-height: 50px;
    color: #4e5969;
}

:deep(.vxe-toolbar) {
    display: none;
}

.ad-by-stages {
    display: flex;
    flex-wrap: wrap;

    .time-item {
        display: flex;
        width: 310px;
        margin-bottom: 12px;

        :deep(.ad-time-piker) {
            display: flex;
            align-items: center;
            position: relative;

            > .sort {
                position: absolute;
                left: 0;
                top: 0;
                width: 30px;
                height: 32px;
                display: block;
                font-size: 16px;
                line-height: 32px;
                border-right: 1px solid #e6ebf5;
                text-align: center;
                cursor: pointer;

                &.active {
                    color: var(--el-color-primary);
                    border-right: 1px solid var(--el-color-primary);
                }
            }

            &.active {
                .el-range-editor.el-input__wrapper {
                    border: 1px solid var(--el-color-primary);
                }
            }
        }

        :deep(.el-range-editor.el-input__wrapper) {
            width: 260px;
            padding-left: 40px;
        }

        .icon-btns {
            display: flex;
            align-items: center;
            margin-left: 10px;

            .el-icon {
                font-size: 18px;
                cursor: pointer;

                &.add {
                    color: var(--el-color-primary);
                    margin-right: 6px;
                }
            }
        }
    }
}

.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    .group-title {
        margin-left: 20px;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
    }
}
</style>
